<template>
  <div>
    <div v-if="playList" class="banner">
      <van-image
        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=320821615,459299112&fm=26&gp=0.jpg"
        fit="cover"
      />
      <h1>热歌榜</h1>
      <p>更新日期：{{ new Date() | currency }}</p>
    </div>
    <BorderTitle>歌曲列表</BorderTitle>
    <ul class="Hotsong">
      <li v-for="(g, index) in hotSong" :key="g.id">
        <span>{{ index + 1 }}</span>
        <SongItem :item="g"></SongItem>
      </li>
    </ul>
    <Loading v-if="playList.length == 0"></Loading>
    <div
      class="loadingmore"
      v-if="hotSong.length < playList.length"
      @click="loadMore"
    >
      <van-icon name="add" />加载更多
    </div>
    <div
      class="loadingmore"
      v-if="hotSong.length == playList.length && hotSong.length != 0"
    >
      没有更多了...
    </div>
  </div>
</template>              

<script>
import SongItem from "@/components/SongItem";
import Loading from "@/components/myLoading";
import BorderTitle from "../components/BorderTitle";
export default {
  data() {
    return {
      hotSong: [],
      playList: [],
      str: "",
      index: 0,
    };
  },
  components: {
    SongItem,
    Loading,
    BorderTitle,
  },
  created() {
    this.$axios
      .get("/playlist/detail?id=3778678")
      // .get("http://musicapi.leanapp.cn/playlist/detail?id=3778678")
      .then((data) => {
        console.log(data);
        return data.data.playlist.trackIds;
      })
      .then((data) => {
        data.forEach((item, index) => {
          if (index == data.length - 1) {
            this.str += item.id;
          } else {
            this.str += item.id + ",";
          }
        });
        return this.str;
      })
      .then((str) => {
        this.$axios
          // .get("http://music.kele8.cn/song/detail?ids=" + str)
          .get("song/detail?ids=" + str)
          .then((data) => {
            this.playList = data.data.songs;
            var small = this.playList.slice(
              20 * this.index,
              20 * (this.index + 1)
            );
            small.forEach((item) => {
              if (this.hotSong.indexOf(item) == -1) {
                this.hotSong.push(item);
              }
            });
          });
      });
  },
  methods: {
    loadMore() {
      ++this.index;
      var small = this.playList.slice(20 * this.index, 20 * (this.index + 1));
      small.forEach((item) => {
        if (this.hotSong.indexOf(item) == -1) {
          this.hotSong.push(item);
        }
      });
    },
  },

  filters: {
    currency() {
      const date = new Date();
      return (
        (date.getMonth() + 1).toString().padStart(2, 0) +
        "月" +
        date.getDate().toString().padStart(2, 0) +
        "日"
      );
    },
  },
};
</script>

<style lang="less" scoped>
.loadingmore {
  // background: rgba(244, 247, 81, 0.9);
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
}
.Hotsong {
  li {
    display: flex;
    &:first-of-type {
      span {
        color: yellow;
      }
    }
    &:nth-of-type(2) {
      span {
        color: #c0c0c0;
      }
    }
    &:nth-of-type(3) {
      span {
        color: rgb(233, 183, 124);
      }
    }

    div {
      flex: 1;
    }

    span {
      display: inline-block;
      line-height: 50px;
      margin: 0 8px;
      color: rgb(240, 240, 240);
    }
  }
}

.banner {
  width: 100vw;
  height: 200px;
  position: relative;
  .van-image {
    width: 100%;
    height: 200px;
  }

  h1 {
    position: absolute;
    font-size: 30px;
    font-weight: bolder;
    color: rgb(70, 70, 70);
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  p {
    position: absolute;
    color: rgb(100, 100, 100);
    bottom: 40px;
    left: 20px;
    font-size: 12px;
  }
}
</style>